<template>
  <div class="add_6">
    <div class="form_box">
      <Form ref="formValidate" :model="formValidate" :label-width="100">
        <Form-item label="商品关键词">
          <Input v-model="formValidate.keyWords" placeholder="请输入商品关键词"></Input>
        </Form-item>
        <Form-item label="商品简介">
          <Input v-model="formValidate.intro" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入商品简介"></Input>
        </Form-item>
        <Form-item label="商品口令">
          <Input v-model="formValidate.word" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入商品口令"></Input>
        </Form-item>
        <Form-item label="商品推荐图">
          <div style="display: flex; align-items: center">
            <div class="picListBox" v-if="formValidate.slideShow && formValidate.slideShow.length>0">
              <div class="picBox" v-for="(item,index) in formValidate.slideShow" :key="index">
                <img :src="item.src" alt="">
                <span class="iconfont icon-close-bold" @click="deletePic(item)"></span>
              </div>
            </div>
            <div class="uploadBox" @click="uploadSwitch(true)">
              <span class="iconfont icon-zhaoxiangji"></span>
            </div>
          </div>
          <p class="tip">建议尺寸：800*800，默认首张图为主图，最多上传5张</p>
        </Form-item>
        <Form-item label="自定义留言">
          <i-switch size="large" v-model="formValidate.isRandom">
            <span slot="open">开启</span>
            <span slot="close">关闭</span>
          </i-switch>
        </Form-item>
        <Form-item v-if="formValidate.isRandom">
          <div class="menuListBox" v-if="messageList && messageList.length>0">
            <div class="menuBox" v-for="(item,index) in messageList" :key="index">
              <Input v-model="item.title" :placeholder="'留言标题'+(index+1)"></Input>
              <Select v-model="item.type" style="width:200px">
                <Option v-for="i in typeList" :value="i.value" :key="i.value">{{ i.label }}</Option>
              </Select>
              <Checkbox-group v-model="item.required">
                <Checkbox label="必填"></Checkbox>
              </Checkbox-group>
              <el-button type="text" size="mini" @click="delMessage(item)">
                <span class="iconfont icon-close"></span>
                <span>删除</span>
              </el-button>
            </div>
          </div>
          <el-button type="text" size="mini" @click="addMenuTemplate">
            <span class="iconfont icon-tianjia"></span>
            <span>添加菜单</span>
          </el-button>
          <p class="tip">
            用户下单时需填写的信息，最多可设置6条
          </p>
        </Form-item>
      </Form>
    </div>
    <aside>
      <uploadPic :displaySwitch="upSwitch" v-if="upSwitch" @uploadSwitch="uploadSwitch" @checkedPic="checkedPic" />
    </aside>
  </div>
</template>

<script>
  export default {
    name: "add_6",
    data() {
      return {
        upSwitch: false,
        formValidate: {
          keyWords: '',  // 关键字
          slideShow: [],  // 商品图
          intro: '',  // 简介
          word: '',  // 口令
          isRandom: true,
          randomMessage: [

          ]
        },
        typeList: [
          { value: 0 , label: '数字'},
          { value: 1 , label: '邮件'},
          { value: 2 , label: '日期'},
          { value: 3 , label: '时间'},
          { value: 4 , label: '手机号'}
        ],
        messageList: []
      }
    },
    created() {

    },
    methods: {
      // 开启/关闭弹框
      uploadSwitch(flag) {
        this.upSwitch = flag
      },
      // 删除图片
      deletePic(item) {
        let index = this.formValidate.slideShow.indexOf(item);
        if(index>=0) {
          this.formValidate.slideShow.splice(index,1)
        }
      },
      checkedPic(checkedList) {
        let length1 = this.formValidate.slideShow.length;
        let length2 = checkedList.length;
        if(length1 + length2 <= 5 ) {
          checkedList.forEach(item => {
            this.formValidate.slideShow.push(item)
          })
        }else{
          this.$Message.error('最多可上传5张图片！')
        }
      },
      // 添加菜单
      addMenuTemplate() {
        let id = this.messageList.length + 1;
        let temp = {
          id: id,
          title: '',
          type: '',
          required: [],
        };
        if(this.messageList.length < 6) {
          this.messageList.push(temp)
        }else{
          this.$Message.warning('最多设置6条自定义留言!')
        }
      },
      // 删除留言菜单
      delMessage(item) {
        this.messageList.splice(this.messageList.indexOf(item), 1)
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "../../../style/uploadPic.scss";
  @import "../../../style/element.scss";
  .add_6 {
    .form_box{
      max-width: 700px;
    }
  }
</style>
<style scoped lang="scss">
  .ivu-input-wrapper{
    width: 300px;
  }
  .menuListBox{
    .ivu-input-wrapper{
      width: 100px;
    }
    .menuBox{
      display: flex;
      align-items: center;
      margin-bottom: 8px;
      .ivu-input-wrapper,
      .ivu-select{
        margin-right: 10px;
      }
    }
  }
</style>
